import base from "./base.js";
import ajax from "../api/ajax.js";
export default class extends base {

  render() {

    this.el.html(`

            <table id="stutable" lay-filter="students"></table>

        `);

    const toolbar = `<div class="layui-btn-container">

                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

                    </div>`;

    const toolbarhead = `<div class="layui-btn-container">

                                <form lay-filter="select" class="layui-form layui-inline">

                                    <div class="layui-inline" style="width:90px">

                                        <select name="type" lay-verify="required">

                                            <option value="name">按姓名</option>

                                            <option value="classId">按班级</option>

                                            <option value="age">按年龄</option>

                                            <option value="sex">按性别</option>

                                        </select>

                                        </div>

                                    <div class="layui-inline">

                                        <input class="layui-input" name="val" autocomplete="off" placeholder="请输入查询内容">

                                    </div>

                                </form>

                                <button class="layui-btn layui-btn-sm" lay-event="search">搜索学生</button>

                                <button class="layui-btn layui-btn-sm" lay-event="view">查看所有学生</button>

                                <button class="layui-btn layui-btn-sm" lay-event="add">添加学生</button>

                                <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除选中学生</button>

                            </div>`;

    ajax.layuilist({
      toolbar,
      toolbarhead
    });



  }

  handle() {

      const upstr = `<div class="layui-form-item">

                      <input type="text" name="name" required lay-verify="required" placeholder="请输入学生姓名" autocomplete="off" class="layui-input">

                  </div>

                  <div class="layui-form-item">

                      <input type="text" name="age" required lay-verify="required|number" placeholder="请输入学生年龄" autocomplete="off" class="layui-input">

                  </div>

                  <div class="layui-form-item">

                      <select name="classId" lay-verify="required">

                          <option value="">请选择班级</option>

                          <option value="1">1</option>

                          <option value="2">2</option>

                          <option value="3">3</option>

                          <option value="4">4</option>

                          <option value="5">5</option>

                      </select> 

                  </div>

                  <div class="layui-form-item">

                      <input type="text" name="tel" required lay-verify="required|phone" placeholder="请输入学生联系方式" autocomplete="off" class="layui-input">

                  </div>

                  <div class="layui-form-item">

                      <input type="text" name="email" required lay-verify="required|email" placeholder="请输入学生邮箱" autocomplete="off" class="layui-input">

                  </div>

                  <div class="layui-form-item">

                      <input type="radio" name="sex" value="男" title="男" checked>

                      <input type="radio" name="sex" value="女" title="女">

                  </div>`;

  //     //表头工具事件

      layui.table.on('toolbar(students)', async obj => {

          switch (obj.event) {

              //查看所有学生

              case "view":
                await layui.table.reload("stutable");
                  break;

              //搜索

              case "search":
                
                  ajax.select(layui.form.val("select"));

                  break;

              //添加学生

              case "add":

                  var type = $(".layui-btn").eq(2).data('type');

                //   创建弹窗
                  layui.layer.open({

                      type: 1

                      , area: '400px'

                      , id: 'layerDemo' + type //防止重复弹出

                      , title: ['添加学生', 'font-size:18px;']

                      , content: `<form class="layui-form showform addstu" action="" style="padding:20px 50px"> ` + upstr + `<div class="layui-form-item">

                      <button class="layui-btn" lay-submit lay-filter="addstu">添加学生</button>

                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>

                  </div></form>`

                      //添加学生

                      , success() {

                          layui.form.on('submit(addstu)', function (data) {

                              layui.layer.closeAll();

                              ajax.add(data.field);

                              layui.layer.msg("添加成功！");

                              ajax.reload();

                              return false

                          });

                      }

                      , shade: 0.2

                  });

                  layui.form.render();

                  break;

              case "delete":

                  const checkStatus = layui.table.checkStatus(obj.config.id);//获取选中数据

                  console.log(checkStatus);

                  // layui.layer.confirm(`真的要删除选中学生吗？`, function (index) {

                  //     

                  //     layer.close(index);

                  // });

                  break;

          }

      });

  //     //行工具事件

  //     layui.table.on("tool(students)", obj => {

  //         switch (obj.event) {

  //             case 'del': {

  //                 layui.layer.confirm(`真的要删除选中学生吗？`, function (index) {

  //                     obj.del();

  //                     layer.close(index);

  //                     console.log(obj.data);

  //                     ajax.delete(obj.data);

  //                     ajax.reload();

  //                 });

  //                 break;

  //             }

  //             case "edit":{

  //                 break;

  //             }

  //         }

  //     })

  }

}